﻿<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8">
    <title>Wood Demo HTML</title>
    <meta name="description" content="Free Html5 Templates and Free Responsive Themes Designed by Kimmy">
    <meta name="author" content="www.cssmoban.com">

    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="css/zerogrid.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

	<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
      <![endif]-->
    <!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<![endif]-->

		<link href='./images/favicon.ico' rel='icon' type='image/x-icon'/>
		<script src="js/bjqs.min.js"></script>

		<!-- Include the basic styles -->
		<link type="text/css" rel="Stylesheet" href="css/bjqs.css" />

		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.flexslider-min.js"></script>
		<script src="js/kwiks.js"></script>

		<script type="text/javascript">
		var Main = Main || {};

		jQuery(window).load(function() {
			window.responsiveFlag = jQuery('#responsiveFlag').css('display');
			Main.gallery = new Gallery();
			
			jQuery(window).resize(function() {
				Main.gallery.update();
			});
		});
		

		function Gallery(){
			var self = this;
			container = jQuery('.flexslider'),
			clone = container.clone( false );

			this.init = function (){
				if( responsiveFlag == 'block' ){
					var slides = container.find('.slides');
					
					slides.kwicks({
						max : 500,
						spacing : 0
					}).find('li > a').click(function (){
						return false;
					});
				} else {
					container.flexslider();
				}
			}
			this.update = function () {
				var currentState = jQuery('#responsiveFlag').css('display');
				
				if(responsiveFlag != currentState) {

					responsiveFlag = currentState;
					container.replaceWith(clone);
					container = clone;
					clone = container.clone( false );
					
					this.init();	
				}
			}
			
			this.init();
		}

		
		</script>
	</head>
	<body>
		<!--------------Header------------- -->
		<div class="wrap-header">
			<header> 
				<div id="logo"><a href="#"><img src="./images/logo.png"/></a></div>

				<nav>
					<ul>
						<li class="current"><a href="#">Home</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Gallery</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</header>
		</div>
		<!--------------Slideshow------------- -->


		<section class="featured">	
			<div id="container">
				<div class="flexslider-controls">
					<ol class="flex-control-nav-2" id="button-control">
						<li id="home">Home</li>
						<li id="blog">Blog</li>
						<li id="gallery">Gallery</li>
						<li id="about">About</li>
						<li id="contact">Contact</li>
					</ol>
				</div>
				<div class="flexslider">
					<ul class="slides">
						<li>
							<a href="#"><img src="images/img01.jpg" /></a>
							<div class="flex-caption">
								<h3>Lorem ipsum dolor sit amet</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
							</div>
						</li>
						<li>
							<a href="#"><img src="images/img02.jpg" /></a>
							<div class="flex-caption">
								<h3>Lorem ipsum dolor sit amet</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
							</div>
						</li>
						<li>
							<a href="#"><img src="images/img03.jpg" /></a>
							<div class="flex-caption">
								<h3>Lorem ipsum dolor sit amet</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
							</div>
						</li>
						<li>
							<a href="#"><img src="images/img04.jpg" /></a>
							<div class="flex-caption">
								<h3>Lorem ipsum dolor sit amet</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
							</div>
						</li>
						<li>
							<a href="#"><img src="images/img01.jpg" /></a>
							<div class="flex-caption">
								<h3>Lorem ipsum dolor sit amet</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
							</div>
						</li>				
					</ul>
				</div>
			</div>
			<span id="responsiveFlag"></span>
		</section>

		<!--------------Content------------- -->
		<section id="content">
			<div class="zerogrid">		
				<div class="row home-content">					
					<div class="col-1-3">
						<div class="wood-service">
							<h5>Lorem ipsum dolor sit amet</h5>
							<div class="wood-service-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
							</div>
						</div>
					</div>
					<div class="col-2-3">
						<div class="about-wood">
							<h5>Lorem ipsum dolor sit amet</h5>
							<hr class="line1">
							<div class="about-us">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>   
							</div>
						</div>
						<hr class="line1">
						<div class="special-offer">
							<h5>Lorem ipsum dolor sit amet</h5>
							<hr class="line1">
							<div class="special-left">
								<img class="thumb" src="images/img01.jpg" />
							</div>
							<div class="special-right">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p> 
							</div>              							
						</div>
					</div>					
				</div>
			</div>
		</section>
		<!-- Like Travel Desk -->
		<div class="zerogrid">
			<div class="travel-desk">
				<h4 class="pull-left">Travel Desk</h4> 
				<hr class="line1" />
				<div class="row">
					<div class="col-1-3">
						<a href="#"><img src="images/img01.jpg" /></a>
						
					</div>
					<div class="col-1-3">
						<a href="#"><img src="images/img01.jpg" /></a>
						
					</div>
					<div class="col-1-3">
						<a href="#"><img src="images/img01.jpg" /></a>
						
					</div>					
				</div>
			</div>
		</div>
		<!--------------Footer------------- -->
		<div class="wrap-footer">
			<footer>
				<div class="wrapfooter">
					<p>Copyright © 2012 - <a href="http://www.cssmoban.com/" target="_blank" title="网页模板">网页模板</a> Collect From www.cssmoban.com</p>
				</div>
			</footer>
		</div>
	</body>
	</html>